<template>
  <div style="margin-top: 100px;margin-left: 100px;">
    <div v-if="add_imgfileList.length < 1" >
      <div style="margin-bottom: 20px;font-weight: 700;color: #606266;">
        <span style="color: red;line-height: 20px;padding-right: 5px;" v-if="requires">*</span>
        {{ text }}
      </div>
      <div>
        <el-upload ref="add_img" :file-list="add_imgfileList" :action="add_imgAction" :auto-upload="true"
        :data="{ 'folderType': formData.type }" :limit="1" :before-remove="delFile" :before-upload="add_imgBeforeUpload"
        :on-success="upSucc" :on-error="onErr" list-type="picture-card" :show-file-list="false" class="upload-resource">
        <div style="display: flex;flex-direction: column">
          <i slot="default" class="el-icon-circle-plus" style="font-size: 60px;color: #D9D9D9 ;"></i>
          <div style="line-height: 40px;margin-top: 10px;color: #999999;">{{ uploadText }}</div>
        </div>
      </el-upload>
      </div>
      
    </div>

    <div v-if="add_imgfileList.length > 0" class="pic_show" :style="myStyle" @mouseenter="delAction"
      @mouseleave="showDel = false">
      <el-image :style="myStyle" :src="add_imgfileList[0].url" fit="contain" :z-index="99">
      </el-image>
      <div class="pic_show_popu" v-if="showDel = true"></div>
      <div class="pic_del" v-if="showDel = true">
        <div class="del_box">
          <div class="del_bth" @click="delFile">删除</div>
          <div class="del_bth" style="margin-left: 40px;" @click="reload">重新上传</div>
        </div>
      </div>
    </div>
    <!-- <div style="margin-top: 5px;color: #F56C6C;font-size: 12px;" v-if="requires && add_imgfileList.length < 1">请上传{{ text }}</div> -->
  </div>
</template>

<script>

export default {
  name: '',
  props: {
    requires: {
      required: false,
      default: true
    }
  },
  data() {
    return {
      text:'医师从业证',
      showDel: false,
      myStyle: {
        with: '370px',
        height: '185px'
      },
      formData: {
        add_img: false,
        sourceUrl: null,
        type: 7
      },
      add_imgfileList: [],
      add_imgAction: process.env.VUE_APP_BASE_API + "/common/resourceFileUpload",
      // mediaAction: process.env.VUE_APP_BASE_API + "/common/resourceFileUpload",
    }
  },
  mounted() {
    this.formData.add_img = false
    this.add_imgfileList = []
  },
  computed: {
    uploadText(){
      return `上传${this.text}`
    },
    imgEndUrl(url) {
      // return 123
      return (url) => {
        //  console.log(url,123);
        // const url = "https://ossapi.169000.net/zyykp/sourceMaterialImg/2024/01/22/hushi_20240122152939A001.jpeg";
        const filenameRegex = /.*\/([^/]*?)$/;
        const match = url.match(filenameRegex);
        if (match) {
          return match[1]
          console.log(match[1]);  // 输出: hushi_20240122152939A001.jpeg  
        } else {
          console.log("没有找到文件名");
          return url
        }
      }
    }
  },
  methods: {
    delAction() {
      this.showDel = true
      //  console.log(234)
      // alert(123)
    },
    reload() {
      this.delFile()
      setTimeout(() => {
        document.querySelector(".upload-resource .el-upload").click()
      }, 200)
    },
    delFile() {  //删除图片，返回false
      this.formData.add_img = false
      this.add_imgfileList = []
    },
    add_imgBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 1000
      if (!isRightSize) {
        this.$message.error('文件大小超过 1000MB')
      }
      this.formData.add_img = true
      return isRightSize
    },
    upSucc(response, file, fileList) {  //文件上传成功  process.env.VUE_APP_ImgUrlHeader 
      // console.log(response);
      if (response.code == 1000) {
        this.$notify.info({
          message: '消息',
          message: `${response.msg}`
        });

        this.add_imgfileList = []
        return
      }
      this.add_imgfileList.push({ url: response.data.url + response.data.filePath, name: this.imgEndUrl(response.data.filePath) })
      this.formData.sourceUrl = response.data.filePath
    },
    onErr(e) { //文件上传失败
      //console.log(e,123);
      this.$notify.error({
        title: '提示',
        message: '上传文件错误，请稍后重试'
      });
    },
  },

}
</script>

<style lang='scss' scoped>
::v-deep .el-upload-list__item {
  width: 360px;
  //display: flex;
  // height: 100px;
}

.my_box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  width: 350px;
  border: 1px dashed #ccc;
  border-radius: 8px;
}

::v-deep .el-upload--picture-card {
  width: 370px;
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.pic_show {
  position: relative;
  width: 370px;
  height: 185px;
  z-index: 1000;

  .pic_show_popu {
    position: absolute;
    z-index: 100;
    top: 0;
    border: 1px dashed #ccc;
    box-sizing: border-box;
    width: 370px;
    height: 185px;
    background-color: rgba(0, 0, 0, 0.5);

  }

  .pic_del {
    z-index: 101;
    color: white;
    position: absolute;
    top: 70px;
    left: 70px;
    cursor: pointer;
  }

  .del_box {
    display: flex;

    // flex-direction: row;
    // justify-content: space-between;
    // align-items: center;
    .del_bth {
      width: 96px;
      padding: 9px 10px;
      border: 1px solid white;
      border-radius: 8px;
      font-size: 14px;
      color: #fff;
      line-height: 16px;
      text-align: center;
    }

    .del_bth:active {
      background-color: rgba(0, 0, 0, 0.95);
    }
  }
}

.pic_show:hover {}
</style>